<script setup lang="ts">
import {ref,onMounted} from "vue";
import {getScreenDeviceInfo} from '@/api/eighteen'
import {CircleCheckFilled} from "@element-plus/icons-vue";
import LogOut from "@/components/LogOut.vue";
const deviceInfo = ref<any>({})
const _getScreenDeviceInfo = ()=>{
  getScreenDeviceInfo().then(res => {
    if (res.code === 200) {
      deviceInfo.value = res.data
    }
  })
}
onMounted(()=>{
  _getScreenDeviceInfo()
})
</script>

<template>
<div class="eq-cont">
  <LogOut top="65px" right="60px" width="50px" height="50px" />
  <div class="eq-top">
    <div class="eq-top_tit">{{deviceInfo.name}}</div>
    <div class="eq-top_left">
      <span>装置复位状态：</span>
      <em>复位{{deviceInfo.resetStatus===1?'完成':'未完成'}}</em>
      <el-icon style="font-size: 28px">
        <CircleCheckFilled :class="deviceInfo.resetStatus===1?'color-green-500':'color-red-500'" />
      </el-icon>
    </div>
  </div>
  <div class="eq-content">
    <div class="eq-right">
      <div class="eq-text">
        <em :class="deviceInfo.status===1?'eq-dotr':'eq-dot'"></em>
        <span>{{deviceInfo.status===1?'使用中':'空闲'}}</span>
      </div>
      <div class="eq-img">
        <img :src="deviceInfo.image" alt="" srcset="">
      </div>
    </div>
    <div class="eq-left">
      <div class="eq-ul">
        <div class="eq-li eq-head_li">点位名称</div>
        <div class="eq-li eq-head_li">复位状态</div>
      </div>
      <el-scrollbar height="420">
        <div class="eq-ul" v-for="(item,index) in deviceInfo.devicePoints" :key="index">
          <div class="eq-li eq-body_li">{{item.name}}</div>
          <div class="eq-li eq-body_li">
            <el-icon style="font-size: 25px">
              <CircleCheckFilled :class="item.resetStatus===1?'color-green-500':'color-red-500'" />
            </el-icon>
          </div>
        </div>
      </el-scrollbar>
<!--      <div class="h-420px overflow-x-auto">-->
<!--        <div class="eq-ul" v-for="(item,index) in deviceInfo.devicePoints" :key="index">-->
<!--          <div class="eq-li eq-body_li">{{item.name}}</div>-->
<!--          <div class="eq-li eq-body_li">-->
<!--            <el-icon style="font-size: 25px">-->
<!--              <CircleCheckFilled :class="item.resetStatus===1?'color-green-500':'color-red-500'" />-->
<!--            </el-icon>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>
  </div>
</div>
</template>

<style scoped lang="less">
.eq-cont{
  padding: 51px 55px 0 54px;
}
.eq-top{
  margin-bottom: 20px;
  padding: 20px;
  .eq-top_tit{
    font-family: AlimamaShuHeiTi;
    font-size: 42px;
    font-style: normal;
    font-weight: bold;
    color: transparent;
    background-image: linear-gradient(to bottom, #FFFFFF 0%, #0771FF 97%, #006DFF 100%);
    -webkit-background-clip: text;
  }
  .eq-top_left{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    span{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 21px;
      font-style: normal;
      color: rgba(255,255,255,0.65);
    }
    em{
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 21px;
      color: #fff;
      font-style: normal;
      margin-right: 11px;
    }
    img{
      width: 29px;
      height: 29px;
    }
  }
  .eq-top_right{
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(51,179,255,0.18);
    border-radius: 6px;
    border: 2px solid #03E0EE;
    width: 115px;
    height: 39px;
    span{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #03E0EE;
      font-style: normal;
      margin-left: 5px;
    }
  }
}
.eq-content{
  display: flex;
  .eq-left{
    width: 749px;
    height: 522px;
    padding: 23px 21px 37px;
    background: rgba(11, 57, 133, 0.56);
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.2);
    .eq-ul{
      display: flex;
      align-items: center;
      .eq-li{
        flex: 1;
        height: 51px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 21px;
        color: #fff;
        font-style: normal;
        margin-right: 9px;
        margin-bottom: 9px;
        &.eq-li:last-child{
          margin-right: 0;
        }
      }
      .eq-head_li{
        background: rgba(51,179,255,0.18);
        border: 2px solid #319BE7;
      }
      .eq-body_li{
        background: rgba(255,255,255,0.18);
        border: 2px solid rgba(255,255,255,0.18);
      }
    }
  }
  .eq-right{
    margin-right: 29px;
    width: 472px;
    height: 519px;
    background: rgba(11, 57, 133, 0.56);
    border-radius: 9px;
    border: 2px solid rgba(255,255,255,0.2);
    padding: 15px 8px 0 20px;
    .eq-text{
      display: flex;
      align-items: center;
      margin-bottom: 20px;
      .eq-dot{
        width: 15px;
        height: 15px;
        background: #00FFFF;
        border: 3px solid rgba(0,255,255,0.23);
        border-radius: 50%;
      }
      .eq-dotr{
        width: 15px;
        height: 15px;
        background: #ef4444;
        border: 3px solid rgba(0,255,255,0.23);
        border-radius: 50%;
      }
      span{
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 18px;
        color: #00FFFF;
        text-shadow: 0px 2px 8px #1F89F9;
        font-style: normal;
        margin-left: 8px;
      }
    }
    .eq-img{
      width: 429px;
      height: 429px;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
